<template>
	<view class="page">
		<!-- 个人信息列表 -->
		<view class="main padding-0">
			<view class="bg-white radius padding">
				<view class="menu-item" @click="goToAvatar">
					<u-text size="32rpx" color="#333333" text="头像"></u-text>
					<view>
						<u-avatar :src="userInfo.avatar" size="80rpx" shape="circle">
						</u-avatar>
					</view>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToNickname">
					<u-text size="32rpx" color="#333333" text="昵称"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.nickname"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToSex">
					<u-text size="32rpx" color="#333333" text="性别"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.gender"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToRole">
					<u-text size="32rpx" color="#333333" text="我的角色"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.role"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToPhone">
					<u-text size="32rpx" color="#333333" text="登陆手机号"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.phone"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 用户信息
const userInfo = ref({
	avatar: '/static/image/img-math-bg.png',
	nickname: 'Zora',
	gender: '男',
	role: '张三的爸爸',
	phone: '13911112222'
})

// 方法
const changePhone = () => {
	uni.showModal({
		title: '提示',
		content: '如需修改手机号，请联系客服',
		showCancel: false
	})
}

const goToAvatar = () => {
	uni.navigateTo({
		url: '/pages/common/mine/avatar'
	})
}

const goToNickname = () => {
	uni.navigateTo({
		url: '/pages/common/mine/nickname'
	})
}

const goToSex = () => {
	uni.navigateTo({
		url: '/pages/common/mine/sex'
	})
}

const goToRole = () => {
	uni.navigateTo({
		url: '/pages/common/mine/role'
	})
}

const goToPhone = () => {
	uni.navigateTo({
		url: '/pages/common/mine/phone'
	})
}

onMounted(() => {
	console.log('个人信息页面加载完成')
})
</script>

<style scoped lang="scss">
.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}
}
</style>
